﻿
@{
    ViewBag.Title = "Upload";
    Layout = "~/Areas/Demo/Views/Shared/Demo_Layout.cshtml";
}
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Upload</h1>
    </div>
</div>

<div class="row">
    <!--uploadify-->
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                uploadify
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <a href="http://www.mamicode.com/info-detail-506696.html" target="_blank">中文API</a>
                </div>
                <div class="form-group">
                    <input id="fileUpload" name="files" type="file" style="position:static;" />
                </div>
                <div class="form-group">
                    <label id="ImageUrl">图片地址</label>
                </div>
                <div class="form-group">
                    <img id="Image" style="width: 300px;height: 300px;" class="img-thumbnail" />
                </div>
                <!--script-->
                <script src="@Url.Content("~/bower_components/uploadify/jquery.uploadify.min.js")" type="text/javascript"></script>
                <!--UploadifySet上传控件初始化-->
                <!--
                    dom表的jQuery对象选择器写法
                    option是uploadify的初始化参数
                -->
                <script type="text/javascript">
            function UploadifySet(dom, option) {
                var model = $(dom);
                var opt = {
                    buttonText: '浏览...',
                    buttonClass: 'btn btn-primary',
                    queueID: 'divQue',
                    multi: false,
                    fileSizeLimit: '5MB',
                    fileTypeDesc: '新图片',
                    fileTypeExts: '*.bmp; *.jpg; *.png;*.gif;*.jpeg',
                    swf: '/bower_components/uploadify/uploadify.swf',
                    height: 33.6,
                    width: 100,
                    queueSizeLimit: 1,
                    onUploadError: function (file, errorCode, errorMsg, errorString) {
                        Modal.alert({ msg: '文件: ' + file.name + ' 无法上传: ' + errorString + ' 错误代码: ' + errorCode + ' 错误描述: ' + errorMsg });
                    },
                    onInit: function () {
                        $(dom + ' #' + model.attr("id") + '-button').css('line-height', 'initial');
                    }
                };
                $.extend(opt, option);
                $(dom).uploadify(opt);
            }
                </script>
                <script>
            UploadifySet("#fileUpload", {
                uploader: '@Url.Action("UploadImage")',
                onUploadSuccess: function (file, data, response) {
                    var jsondata = jQuery.parseJSON(data);
                    if (jsondata.IsSuccess) {
                        $("#Image").attr("src", jsondata.Message);
                        $("#ImageUrl").text(jsondata.Message);
                    } else {
                        alert(jsondata.Message);
                    }
                }
            });
                </script>
            </div>
        </div>
    </div>
    <!--fileinput-->
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                fileinput
            </div>
            <div class="panel-body">
                <link href="~/bower_components/bootstrap-fileinput-master/css/fileinput.min.css" rel="stylesheet" />
                <div class="form-group">
                    <a href="http://plugins.krajee.com/file-input" target="_blank">API</a>
                </div>
                <div class="form-group">
                    <input id="fileInput" name="Filedata" type="file" data-preview-file-type="text" single accept=".bmp,.jpg,.png,.gif,.jpeg">
                </div>
                <div class="form-group">
                    <label id="ImageUrl2">图片地址</label>
                </div>
                <div class="form-group">
                    <img id="Image2" style="width: 300px;height: 300px;" class="img-thumbnail" />
                </div>
                <!--script-->
                @Scripts.Render("~/bundles/fileinput")
                <script src="~/Scripts/Common/fileInput.js?v=2"></script>
                <script>
                    $(function () {
                        $("#fileInput").fileInputSet_Image({ uploadUrl: '@(Url.Action("UploadImage"))' })
                            .on("fileuploaded", function (event, data, previewId, index) {
                                if (data.response.IsSuccess) {
                                    $("#Image2").attr("src", data.response.Message);
                                    $("#ImageUrl2").text(data.response.Message);
                                } else {
                                    alert(data.response.Message);
                                }
                            });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
